<template>
  <div class="frame">
    <div class="details">
      <table cellpadding="0" cellspacing="0" class="songListDetails">
        <tr>
          <td class="songListImg"><img :src="TheSongListDetails.coverImgUrl" :alt="TheSongListDetails.name"></td>
          <td>
            <ul class="songListInfo">
              <li>
                <h2>{{TheSongListDetails.name}}</h2>
              </li>
              <li class="createTime">{{formatDate(TheSongListDetails.createTime)}}创建</li>
            </ul>
            <ul class="operation">
              <li>
                <el-button type="primary" plain v-if="!isCollect" @click="collectSongList(TheSongListDetails.id)"><i class="el-icon-folder-add"></i>&nbsp;收藏（{{TheSongListDetails.subscribedCount}}）</el-button>
                <el-button type="primary" plain v-if="isCollect" @click="collectSongList(TheSongListDetails.id)"><i class="el-icon-folder-add"></i>&nbsp;取消收藏（{{TheSongListDetails.subscribedCount + 1}}）</el-button>
              </li>
              <li>
                <el-button type="primary" plain><i class="el-icon-chat-dot-square"></i>&nbsp;评论（{{TheSongListDetails.commentCount}}）</el-button>
              </li>
            </ul>
          </td>
        </tr>
      </table>

      <table cellpadding="0" cellspacing="0" class="songListDetails">
        <tr>
          <td class="songTableTitle">歌曲列表</td>
          <td class="songCount">{{TheSongListDetails.trackCount}}首歌</td>
          <td colspan="3" class="songPlayCount">播放：{{TheSongListDetails.playCount}}次</td>
        </tr>
      </table>

      <table cellpadding="0" cellspacing="0" class="songListDetails3" style="table-layout: fixed;">
        <tr class="songListTh">
          <td colspan="3" style="width:15%;"></td>
          <td class="name">标题</td>
          <td class="songTime">时长</td>
          <td class="songer">歌手</td>
        <tr>
        <tr v-for="(item,i) in AllSongsDetails" :key="i" :class="(i+1)%2==0?bgcolor.color2:bgcolor.color1">
          <td class="songImg" v-if="item"><img :src="item.al.picUrl" :alt="item.al.name"></td>
          <td class="ranking">{{i+1}}</td>
          <td class="play">
            <i class="el-icon-video-play" @click="getSongUrl(item.id)"></i>
          </td>
          <td class="name" v-if="item">
            <i class="songName" @click="toSongDetails(item.id)">{{item.name}}</i>&nbsp;
            <i v-if="item.mv != 0" id="mvicon" class="el-icon-video-camera" @click="toMVDetails(item.mv)"></i>
          </td>
          <td class="songTime" v-if="item">{{formatDateTime(item.dt)}}</td>
          <td class="songer" v-if="item" @click="toSongerDetails(item.ar[0].id)">{{item.ar[0].name}}</td>
        </tr>
      </table>
      <el-pagination v-if="TheSongListDetails.trackCount > 10" :page-size="10" :pager-count="7" layout="prev, pager, next" :total="TheSongListDetails.trackCount" :current-page="currentPage" @current-change="handleCurrentPageChange">
      </el-pagination>
    </div>

    <div>
      <h2>评论（共{{TheSongListDetails.commentCount}}条评论）</h2>
      <el-input type="textarea" :rows="4" placeholder="说说你的看法吧" v-model="textarea" resize="none"></el-input>
      <div class="postComments">
        <el-button type="primary" size="mini" @click="comment(TheSongListDetails.id)">发表评论</el-button>
      </div>

      <h3 v-if="hotComments.length != 0">精彩评论</h3>
      <ul class="comments" v-if="hotComments.length != 0">
        <li v-for="(item,i) in hotComments" :key="i">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
              <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
            </tr>
            <tr>
              <td class="commentTime">{{formatDate(item.time)}}</td>
            </tr>
            <tr>
              <td></td>
              <td class="commentInfo">{{item.content}}</td>
            </tr>
            <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
              <td></td>
              <td class="commentInfo">
                <div class="replyComment">
                  <table>
                    <tr>
                      <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                    </tr>
                    <tr>
                      <td class="commentInfo">{{item.beReplied[0].content}}</td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td></td>
              <td class="commentLiked">
                <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                <a href="#">回复</a>
              </td>
            </tr>
          </table>
        </li>
      </ul>

      <h3 v-if="comments.length != 0">最新评论</h3>
      <ul class="comments" v-if="comments.length != 0">
        <li v-for="(item,i) in comments" :key="i">
          <table cellpadding="0" cellspacing="0">
            <tr>
              <td rowspan="2" class="userImg" @click="toUserDetails(item.user.userId)"><img :src="item.user.avatarUrl" :alt="item.user.nickname"></td>
              <td class="userName" @click="toUserDetails(item.user.userId)">{{item.user.nickname}}</td>
            </tr>
            <tr>
              <td class="commentTime">{{formatDate(item.time)}}</td>
            </tr>
            <tr>
              <td></td>
              <td class="commentInfo">{{item.content}}</td>
            </tr>
            <tr v-if="item.beReplied != undefined && item.beReplied == null || item.beReplied.length > 0">
              <td></td>
              <td class="commentInfo">
                <div class="replyComment">
                  <table>
                    <tr>
                      <td class="userName">{{item.beReplied[0].user.nickname}}</td>
                    </tr>
                    <tr>
                      <td class="commentInfo">{{item.beReplied[0].content}}</td>
                    </tr>
                  </table>
                </div>
              </td>
            </tr>
            <tr>
              <td></td>
              <td class="commentLiked">
                <a href="#"><i class="el-icon-thumb"></i>（{{item.likedCount}}）</a>
                <a href="#">回复</a>
              </td>
            </tr>
          </table>
        </li>
      </ul>
      <el-pagination v-if="comments.length != 0" :page-size="20" :pager-count="7" layout="prev, pager, next" :total="TheSongListDetails.commentCount" :current-page="commentPage" @current-change="handleCommentChange">
      </el-pagination>
    </div>
  </div>
</template>

<script>
import { getSongListDetails, getSongDetails, getSongListAllSong, getSongListComments } from "../../../network/home"
import { getSongUrl } from "../../../network/search"
import { getUserInfo, getUserCollectSongList, collectSongList, comment, getComment } from "../../../network/user";

export default {
  name: "SongListDetail",
  data() {
    return {
      //存放歌单的详情，例如歌单中歌曲的id等
      TheSongListDetails: [],
      //存放歌单中所有歌曲的详情
      AllSongsDetails: [],
      //添加背景样式
      bgcolor: { color1: "white", color2: "grey" },
      loginCookie: "",
      textarea: "",
      hotComments: "",
      comments: "",
      //默认显示在第几页
      currentPage: 1,
      commentPage: 1,
      isCollect: "",
    }
  },
  created() {
    this.getLoginCookie();
  },
  mounted() {
    this.getSongListDetails(this.$route.params.id, this.loginCookie);
    this.getSongListAllSong(this.$route.params.id, 0, this.loginCookie);
    this.getHotSongListComments(this.$route.params.id, 0, this.loginCookie);
    this.getSongListComments(this.$route.params.id, 0, this.loginCookie);
  },
  methods: {
    getLoginCookie() {
      this.loginCookie = sessionStorage.getItem("cookie");
    },
    //根据歌单id 获取歌单详情
    getSongListDetails(songListId, cookie) {
      getSongListDetails(songListId, cookie).then(res => {
        //console.log(res.data);
        this.TheSongListDetails = res.data.playlist;
        this.getUserCollectSongList(res.data.playlist.id);
      })
    },
    //根据歌单id获取歌单所有歌曲
    getSongListAllSong(id, offset, cookie) {
      getSongListAllSong(id, offset, cookie).then(res => {
        //console.log(res.data);
        this.AllSongsDetails = res.data.songs;
      })
    },
    //获取歌单热门评论
    getHotSongListComments(id, offset, cookie) {
      getSongListComments(id, offset, cookie).then(res => {
        //console.log(res.data);
        this.hotComments = res.data.hotComments;
      })
    },
    //获取歌单评论
    getSongListComments(id, offset, cookie) {
      getSongListComments(id, offset, cookie).then(res => {
        this.comments = res.data.comments;
        this.getComment(id);
      })
    },
    //根据歌曲id 获取歌曲详情
    getSongDetails(songId) {
      const result = [];
      getSongDetails(songId).then(res => {
        //console.log(res.data.songs[0]);
        result.push(res.data.songs[0]);
      })
      //console.log(result);
      return result;
    },
    getSongUrl(id) {
      getSongUrl(id).then(res => {
        localStorage.setItem("songUrl", res.data.data[0].url);
        //刷新页面 input传入过去 其中内容改了 但是页面还是原来的 需要刷新显示
        location.reload()
      })
    },
    getUserCollectSongList(songListId) {
      getUserCollectSongList(localStorage.getItem("username"), songListId).then(res => {
        this.isCollect = res.data;
      })
    },
    collectSongList(songListId) {
      collectSongList(localStorage.getItem("username"), songListId).then(res => {
        this.isCollect = res.data;
      })
    },
    comment(songListId) {
      getUserInfo(localStorage.getItem("username")).then(res => {
        comment(songListId, localStorage.getItem("username"), res.data.userImgName, res.data.userImgPath, res.data.virPath, res.data.nickname, this.textarea, "songList").then(success => {
          console.log(success.data);
          if (success.data == "200") {
            this.getComment(songListId);
          }
          location.reload();
        })
      })
    },
    getComment(songListId) {
      getComment(songListId, localStorage.getItem("username"), "songList").then(cres => {
        console.log(cres.data);
        //this.formatComment(this.comments, cres.data);
      })
    },
    // formatComment(comments, myComments) {
    //   for (let i = 0; i < comments.length; i++) {
    //     for (let j = 0; j < myComments.length; j++) {
    //       if (myComments[j].time > comments[i].time) {
    //         comments.splice(i, 0, myComments[j]);
    //       }
    //     }
    //   }
    // },
    toUserDetails(id) {
      this.$router.push({ name: "UserDetails", params: { id: id } });
    },
    //跳转到播放mv界面
    toMVDetails(id) {
      this.$router.push({ name: "MVDetail", params: { id: id } });
    },
    toSongDetails(id) {
      this.$router.push({ name: "SongDetails", params: { id: id } });
    },
    toSongerDetails(id) {
      this.$router.push({ name: "SongerDetails", params: { id: id } });
      location.reload();
    },
    handleCurrentPageChange(val) {
      this.currentPage = val;
      this.getSongListAllSong(this.$route.params.id, val, this.loginCookie);
    },
    handleCommentChange(val) {
      this.commentPage = val;
      this.getSongListComments(this.$route.params.id, (val - 1) * 20, this.loginCookie);
    },
    formatDateTime(mss) {
      let minutes = Math.floor((mss % (1000 * 60 * 60)) / (1000 * 60));
      let seconds = Math.round((mss % (1000 * 60)) / 1000);

      if (minutes < 10) {
        if (seconds < 10) {
          return "0" + minutes + ":0" + seconds;
        } else {
          return "0" + minutes + ":" + seconds;
        }
      } else {
        if (seconds < 10) {
          return minutes + ":0" + seconds;
        } else {
          return minutes + ":" + seconds;
        }
      }
    },
    formatDate(time) {
      let date = new Date(time);
      let y = date.getFullYear();// 年
      let MM = date.getMonth() + 1;// 月
      MM = MM < 10 ? ('0' + MM) : MM;
      let d = date.getDate();// 日
      d = d < 10 ? ('0' + d) : d;
      return y + '-' + MM + '-' + d;
    },
    formatNumber(num) {
      num = Number(num);
      if (num == 0) {
        return num + '';
      } else
        if (num > 1 && num < 10000) {
          return num + '';
        } else {
          return (num / 10000).toFixed(1) + '万';
        }
    },
  }
}
</script>

<style scoped>
.frame {
  width: 75%;
  height: 100%;
  margin: 0 auto;
}
.songListDetails {
  width: 100%;
  height: 100%;
  margin-top: 1.5rem;
}
.songListDetails3 {
  width: 100%;
  height: 100%;
  margin-bottom: 1.5rem;
}
.songListDetails3 tr:hover {
  background: RGB(245, 247, 250);
}
.songListImg {
  width: 150px;
  height: 150px;
}
.songListImg img {
  width: 100%;
  height: 100%;
}
.songListInfo {
  list-style-type: none;
}
.createTime {
  font-size: 0.8rem;
  color: RGB(153, 153, 153);
}
.operation {
  list-style-type: none;
}
.operation li {
  float: left;
  margin-right: 5px;
}
.songTableTitle {
  font-size: 1.75rem;
  width: 13%;
}
.songCount {
  color: RGB(102, 102, 102);
}
.songPlayCount {
  text-align: right;
}
.songListTh td {
  padding: 5px;
}
.songImg {
  width: 15%;
}
.songImg img {
  width: 89%;
  height: 89%;
  padding: 5px;
}
.ranking {
  text-align: center;
  line-height: 60px;
  width: 5%;
}
.play {
  width: 1%;
  text-align: center;
}
.name {
  padding: 10px;
  width: 40%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
#mvicon:hover {
  background: RGB(64, 158, 255);
}
.songName {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.songTime {
  width: 12%;
  padding: 10px;
}
.songer {
  padding: 10px;
  width: 20%;
}
.whtie {
  background: RGB(255, 255, 255);
}
.grey {
  background: RGB(250, 250, 250);
}
.el-pagination {
  margin: 0 0 2% 25%;
}
.postComments {
  text-align: right;
  margin-top: 5px;
}
.comments {
  list-style-type: none;
}
.comments li {
  margin-left: -3.2%;
  border-top: RGB(204, 204, 204) 1px solid;
  padding: 20px;
}
.userImg {
  width: 6%;
}
.userImg img {
  width: 100%;
  height: 100%;
}
.userName {
  padding-left: 20px;
  color: RGB(64, 158, 255);
}
.userName:hover {
  text-decoration: underline solid RGB(64, 158, 255);
}
.commentTime {
  padding-left: 20px;
  color: RGB(153, 153, 153);
}
.commentInfo {
  padding-left: 20px;
}
.replyComment {
  border: solid 1px RGB(222, 222, 222);
  background: RGB(242, 242, 242);
}
.commentLiked {
  text-align: right;
}
.commentLiked a {
  text-decoration: none;
  color: black;
}
.commentLiked a:hover {
  color: RGB(64, 158, 255);
}
</style>